<template>
	<div class="spare-part-manage">
		<el-card>
			<template #header>
				<div class="header-bar">
					<span>备件信息管理</span>
					<el-button type="primary" size="small" @click="openDialog('add')">新增备件</el-button>
				</div>
			</template>

			<!-- 搜索区域 -->
			<el-form :inline="true" :model="filters" class="mb-2">
				<el-form-item label="备件编码"><el-input v-model="filters.code" /></el-form-item>
				<el-form-item label="名称"><el-input v-model="filters.name" /></el-form-item>
				<el-form-item label="规格型号"><el-input v-model="filters.model" /></el-form-item>
				<el-form-item label="状态">
					<el-select v-model="filters.status" clearable>
						<el-option label="启用" value="启用" />
						<el-option label="停用" value="停用" />
					</el-select>
				</el-form-item>
				<el-button type="primary">搜索</el-button>
				<el-button @click="reset">重置</el-button>
			</el-form>

			<!-- 表格展示 -->
			<el-table :data="filteredList" border stripe>
				<el-table-column prop="code" label="备件编码" width="120" />
				<el-table-column prop="name" label="名称" />
				<el-table-column prop="customerCode" label="客户件号" width="120" />
				<el-table-column prop="model" label="规格型号" />
				<el-table-column prop="unit" label="计量单位" width="100" />
				<el-table-column prop="brand" label="品牌" width="100" />
				<el-table-column label="安全库存" width="160">
					<template #default="scope">
						{{ scope.row.min }} ~ {{ scope.row.max }}
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" width="80">
					<template #default="scope">
						<el-tag :type="scope.row.status === '启用' ? 'success' : 'info'">{{ scope.row.status }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="180">
					<template #default="scope">
						<el-button size="small" @click="openDialog('edit', scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="confirmDelete(scope.$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 弹窗 -->
		<el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="客户件号"><el-input v-model="form.customerCode" /></el-form-item>
				<el-form-item label="备件编码"><el-input v-model="form.code" /></el-form-item>
				<el-form-item label="名称"><el-input v-model="form.name" /></el-form-item>
				<el-form-item label="发货地区"><el-input v-model="form.region" /></el-form-item>
				<el-form-item label="规格型号"><el-input v-model="form.model" /></el-form-item>
				<el-form-item label="计量单位"><el-input v-model="form.unit" /></el-form-item>
				<el-form-item label="品牌"><el-input v-model="form.brand" /></el-form-item>
				<el-form-item label="库存下限"><el-input-number v-model="form.min" :min="0" /></el-form-item>
				<el-form-item label="库存上限"><el-input-number v-model="form.max" :min="0" /></el-form-item>
				<el-form-item label="状态">
					<el-select v-model="form.status">
						<el-option label="启用" value="启用" />
						<el-option label="停用" value="停用" />
					</el-select>
				</el-form-item>
				<el-form-item label="备注">
					<el-input type="textarea" v-model="form.remark" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'

const dialogVisible = ref(false)
const dialogTitle = ref('')
const form = ref({})
const currentIndex = ref(-1)

const list = ref(
	[...Array(15)].map((_, i) => ({
		customerCode: `CUST-${1000 + i}`,
		code: `SP${i + 1}`,
		name: `备件${i + 1}`,
		region: ['华北', '华东', '华南'][i % 3],
		model: `M-${i + 1}`,
		unit: '个',
		brand: ['三菱', '西门子', '国产'][i % 3],
		min: 10 + i,
		max: 30 + i,
		status: i % 3 === 0 ? '停用' : '启用',
		remark: `第${i + 1}条模拟数据`
	}))
)

const filters = ref({ code: '', name: '', model: '', status: '' })

const filteredList = computed(() => {
	const f = filters.value
	return list.value.filter(i =>
		(!f.code || i.code.includes(f.code)) &&
		(!f.name || i.name.includes(f.name)) &&
		(!f.model || i.model.includes(f.model)) &&
		(!f.status || i.status === f.status)
	)
})

const reset = () => {
	filters.value = { code: '', name: '', model: '', status: '' }
}

const openDialog = (type, row = null) => {
	dialogTitle.value = type === 'add' ? '新增备件信息' : '编辑备件信息'
	dialogVisible.value = true
	if (type === 'edit') {
		form.value = { ...row }
		currentIndex.value = list.value.findIndex(i => i.code === row.code)
	} else {
		currentIndex.value = -1
		form.value = {
			customerCode: '', code: '', name: '', region: '',
			model: '', unit: '', brand: '', min: 0, max: 0,
			status: '启用', remark: ''
		}
	}
}

const submitForm = () => {
	if (currentIndex.value >= 0) {
		list.value[currentIndex.value] = { ...form.value }
	} else {
		list.value.push({ ...form.value })
	}
	dialogVisible.value = false
}

const confirmDelete = (index) => {
	const item = list.value[index]
	list.value.splice(index, 1)
}
</script>

<style scoped>
.spare-part-manage {
	padding: 20px;
}

.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
}

.mb-2 {
	margin-bottom: 12px;
}
</style>


  
